<template>
  <div class="container">
    <!-- tool start -->
    <el-form :model="formInline" label-width="120px" @keyup.enter.native="search">
      <el-row>
        <el-col :span="8">
          <el-form-item :label="$t('m.pick.tasknumbercode')">
            <el-input maxlength="20" show-word-limit v-model="formInline.tasknumber" placeholder></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('m.pick.pickingtaskcode')">
            <el-input maxlength="20" show-word-limit v-model="formInline.pickingtaskcode" placeholder></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="SKU">
            <el-input maxlength="20" show-word-limit v-model="formInline.productspeccode"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="24" align="right">
          <el-button type="primary" @click="search">{{$t('m.query')}}</el-button>
          <el-button type="primary" @click="appoint" :disabled="isOverflow">{{$t('m.shelves.appoint')+$t('m.reduction.pickingusers')}}</el-button>
          <el-button type="primary" @click="returnEvent" :disabled="isOverflow">{{$t('m.reduction.return')}}</el-button>
        </el-col>
      </el-row>
    </el-form>
    <!-- tool end -->

    <!-- table数据展示 start -->
    <el-table
      ref="table"
      stripe
      empty-text
      fit
      class="table-wrap single-select-table"
      :data="tableData"
      :row-style="tableRowStyle"
      :row-class-name="tableRowClassName"
      @row-click="rowClick"
      @selection-change="handleSingleSelectionChange">
      <el-table-column align="center" type="selection" width="55"></el-table-column>
      <el-table-column align="center" type="index" :label="$t('m.index')" width="50"></el-table-column>
      <el-table-column align="center" prop="tasknumber" :label="$t('m.pick.tasknumbercode')"></el-table-column>
      <el-table-column align="center" prop="locationcode" :label="$t('m.pick.location')"></el-table-column>
      <el-table-column align="center" prop="pickingtaskcode" :label="$t('m.pick.pickingtaskcode')"></el-table-column>
      <el-table-column align="center" prop="productspeccode" label="SKU"></el-table-column>
      <el-table-column align="center" prop="state" :label="$t('m.state')" :formatter="stateFormatter"></el-table-column>
      <el-table-column align="center" prop="quantity" :label="$t('m.out.totalqty')"></el-table-column>
      <el-table-column align="center" :label="$t('m.createdate')">
        <template slot-scope="scope">{{scope.row.createdate|dateFilter}}</template>
      </el-table-column>
      <el-table-column align="center" prop="returninguser" :label="$t('m.reduction.pickingusers')"></el-table-column>
      <el-table-column align="center" prop="modifydate" :label="$t('m.reduction.date')" :formatter="dateFormatter"></el-table-column>
    </el-table>

    <el-pagination
      background
      layout="sizes, prev, pager, next, jumper"
      :page-sizes="pageSizeList"
      :page-size="rowSize"
      :current-page="page"
      :total="totalRows"
      @current-change="currentChange"
      @size-change="handleSizeChange">
    </el-pagination>
    <!-- table数据展示 end -->

    <!-- 指派负责人 start -->
    <assignPopup
      v-if="assignDialogVisible"
      :dialogVisible="assignDialogVisible"
      :options="taskleaderOptions"
      @close="assignDialogVisible=false"
      @save="appointmentSave">
    </assignPopup>
    <!-- 指派负责人 end -->

    <!-- 表格--拣货btn start -->
    <reductionPopup
      v-if="reductionPopupVisible"
      :popupVisible="reductionPopupVisible"
      :tasknumber="tasknumber"
      @callback="getData"
      @close="reductionPopupVisible=false">
    </reductionPopup>
    <!-- 表格--拣货btn end -->
  </div>
</template>
<script>
import common from '@/utils/common'
export default {
  name:'reduction',
  data(){
    return {
      timer:null,
      formInline:{
        tasknumber:'', // 拣货任务号
        pickingtaskcode:'', // 拣货任务单号
        productspeccode:'' // sku
      },

      stateOptions:[
        { value:1, label:this.$t('m.reduction.state1') },
        { value:2, label:this.$t('m.reduction.state2') },
        { value:9, label:this.$t('m.reduction.state9') },
        { value:10, label:this.$t('m.reduction.state10') }
      ],

      tableData:[],

      assignDialogVisible:false, // 控制指派负责人dialog显示隐藏

      tasknumber:0, // 当前操作的拣货任务明细id
      returntaskid:0, // 当前操作的还货上架任务id

      reductionPopupVisible:false, // 控制还货上架任务dialog显示隐藏
      reductionDetailPopupVisible:false // 控制还货上架任务明细dialog显示隐藏
    }
  },
  computed:{
    isOverflow(){
      return this.tableRowSelected.length > 1
    }
  },
  mounted(){
    this.getData()
  },
  components:{
    assignPopup:() => import('@/components/common/assign'),
    reductionPopup:() => import('@/components/reduction/reduction-popup')
  },
  methods:{
    search(){
      this.page = 1
      this.getData()
    },
    // 获取还货人list
    appoint(){
      let ids = this.tableRowSelected.length ? this.tableRowSelected[0].returntaskid : ''
      if (!ids) return this.callbackMessage(this.$t('m.shelves.choose'))
      if (this.tableRowSelected[0].returninguser) return this.callbackMessage(this.$t('m.pick.hasPicker'))

      let options = {
        method:'get',
        url:'/pickingtask/taskleaders',
        params:{ ids }
      }
      this.$axios(options).then(({ data }) => {
        this.taskleaderOptions = data
        this.assignDialogVisible = true
      })
    },
    getData(){
      let options = {
        method:'get',
        url:'/returntask/page',
        params:Object.assign({}, this.formInline, {page:this.page,rows:this.rowSize})
      }
      this.$axios(options).then(({ data }) => {
        this.tableData = data.records
        this.totalRows = data.total
        if (!this.tableData.length) return this.callbackMessage(this.$t('m.nodata'))
      })
    },
    // 还货上架btn
    returnEvent(){
      if(this.tableRowSelected.length){
        if(!this.tableRowSelected[0].returninguserid) return this.callbackMessage(this.$t('m.reduction.appoint'))
        this.tasknumber = this.tableRowSelected[0].tasknumber
      } else {
        this.tasknumber = ''
      }
      this.reductionPopupVisible = true
    },
    // 指派任务 保存按钮
    appointmentSave(id){
      if (id === '') return this.callbackMessage(this.$t('m.choose') + this.$t('m.charge'))
      let {returntaskid} = this.tableRowSelected[0]
      let options = {
        method:'put',
        url:'/returntask/assign',
        params:{
          returntaskid ,
          returninguserid:id
        }
      }
      this.$axios(options).then(({ message }) => {
        this.callbackMessage(message, 'success')
        this.assignDialogVisible = false
        this.getData()
      })
    },
    // 表格状态过滤
    stateFormatter(row){
      let result = this.stateOptions.find((item) => item.value === row.state)
      if (result) return result.label
      else return '---'
    },
    dateFormatter(row){
      return row.state===9?common.timestampToTime(row.modifydate):''
    }
  },
  beforeRouteLeave(to, form, next){
    this.assignDialogVisible=false
    this.reductionPopupVisible=false
    this.reductionDetailPopupVisible=false
    next()
  }
}
</script>
<style lang="scss" scoped>
.container ::v-deep .el-select {
  width: 100%;
}
</style>